<template>
  <div class="job">
    <div class="job-bg">
      <h3>加入我们，职等你来</h3>
    </div>
    <div class="main">
      <div class="job-context">
        <ul class="clearfix" >
          <li   v-for="(person,i) in people" :key="i"
           @click="$router.push('/aboutus/job/'+person.num)"
          >{{person.name}}</li>
        </ul>
      </div>
    </div>
  <router-view ></router-view>
  </div>
</template>

<script>
export default {
    data() {
      return {
        people: [
          {name:'采购员',num:1,},
          {name:'质检员',num:2},
          {name:'资深客服',num:3},
          {name:'统计员',num:4},
          {name:'资深市场营销专员',num:5},
          {name:'网站设计师',num:6},
          {name:'网站编辑',num:7},
          {name:'CSS设计规划师  ',num:8},
          {name:'前端开发程序员  ',num:9},
          {name:'社区开发程序员  ',num:10},
          {name:'系统开发程序员  ',num:11},
        ]
      }
    },
    mounted () {
      // 点击后到页面顶部
       window.scrollTo(0,0)
    },
};
</script>

<style lang="scss" scoped>
// 清除浮动
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.job-bg {
  height: 270px;
  width: 100%;
  line-height: 270px;
  background: url("../assets/aboutus/job/bg.png") no-repeat;
  background-size: 1920px 100%;
  background-position: 50%;
  > h3 {
    font-weight: 400;
    font-size: 50px;
    color: #fff;
    text-align: center;
  }
}
.job-context {
  width: 960px;
  margin: 0 auto 60px;
  ul {
    li {
      float: left;
      margin-right: 30px;
      margin-top: 20px;
      display: block;
      width: 300px;
      height: 66px;
      line-height: 66px;
      text-align: center;
      color: #333;
      border: 1px solid #e1e1e1;
      font-size: 16px;
      box-sizing: border-box;
      text-decoration: none;
      transition: all 0.3s;
      cursor: pointer;
    }
    :nth-child(3){
      margin-right: 0;
    }
    :nth-child(6){
      margin-right: 0;
    }
    :nth-child(9){
      margin-right: 0;
    }
    li:hover{
        border:1px solid #ff6e6e;
        color: #ff6e6e;
    }
  }
}
</style>